<template>
  <div class="TransactionInformationCont">
    <Table :loading="loading" :columns="columns1" :data="data1" >
      <template slot-scope="{ row }" slot="buildingNameBasis">
        <p>{{ row.buildingName }}</p>
        <p>{{ row.houseNum +' | '+ row.area + 'm²'}}</p>
      </template>
      <template slot-scope="{ row }" slot="transactionDetails">
        <p>认购：{{ (row.subscriptionUnit-0)/10000 + '万/㎡ | '+ (row.subscriptionTotal-0)/10000 + '万 | '+ $tool.dateFtt("yyyy/MM/dd",row.depositDate) }}</p>
        <p v-show="row.type == 3 || row.type == 4">签约：{{ (row.signedUnit-0)/10000 +'万/㎡ | '+ (row.signedTotal-0)/10000 +'万 | '+ row.signDate}}</p>
        <p v-show="row.type == 2">退购：{{ row.opeateName +' | '+ row.buildingName + ' | '+ row.opeateTime}}</p>
        <p v-show="row.type == 4">退签：{{ row.opeateName +' | '+ row.buildingName +' | '+ row.opeateTime}}</p>
      </template>
      <template slot-scope="{ row }" slot="homeBuyer">
        <div v-for="(item, index) in row.buyers" :key="index">
          <p>{{ item.customerName +' '+ item.cardId}}</p>
          <p>{{ item.phone | mobilePhoneNumberFourAsterisk}}</p>
        </div>
      </template>
      <template slot-scope="{ row }" slot="transactionStatus">
        <p>{{row.type == 1 ? '已认购' : row.type == 2 ? '已退购' : row.type == 3 ? '已签约' : row.type == 4 ? '已退签' : '-'}}</p>
      </template>
    </Table>
    <!-- 退购 -->
    <Modal width="400" v-model="repurchaseState" :mask-closable="false" :footerHide="true" :closable='false' class="recordedExistenceModel">
      <p>是否取消客户认购？</p>
      <div class="footer">
        <Button @click="repurchaseStateCancel" style="margin-left: 8px">否</Button>
        <Button type="primary" @click="repurchaseStateOk">是</Button>
      </div>
    </Modal>
    <!-- 退签 -->
    <Modal width="400" v-model="WithdrawState" :mask-closable="false" :footerHide="true" :closable='false' class="recordedExistenceModel">
      <p>是否取消客户签约？</p>
      <div class="footer">
        <Button @click="WithdrawStateCancel" style="margin-left: 8px">否</Button>
        <Button type="primary" @click="WithdrawStateOk">是</Button>
      </div>
    </Modal>
    <!-- 签约 -->
    <Modal
      v-model="subscribeModalState"
      title="签约"
      @on-cancel="subscribeModalCancel"
      width="700" :footer-hide="true" :mask-closable="false" class="subscribeModalStyle">
      <Form class="formTransactionClass" ref="formTransactionInformation" :model="formTransactionInformation" :rules="transactionInformationValidate" :label-width="110">
        <FormItem label="签约日期：" prop="subscriptionDate">
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择签约日期" style="width: 100%;" v-model="formTransactionInformation.subscriptionDate"></DatePicker>
        </FormItem>
        <FormItem label="单价：" prop="subscriptionHousePrice">
          <Row>
            <Col span="22"><Input v-model="formTransactionInformation.subscriptionHousePrice" placeholder="请输入单价"></Input></Col>
            <Col span="2" style="text-align: center">万</Col>
          </Row>
        </FormItem>
        <FormItem label="总价：" prop="subscriptionHouseTotal">
          <Row>
            <Col span="22"><Input v-model="formTransactionInformation.subscriptionHouseTotal" placeholder="请输入总价"></Input></Col>
            <Col span="2" style="text-align: center">万</Col>
          </Row>
        </FormItem>
      </Form>
      <div class="footer">
        <Button @click="subscribeModalCancel">取消</Button>
        <Button type="info" @click="subscribeModalOk">保存</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { businesslist, orderSignedCreate, subscriptionUpdate, businessUpdate } from "@/api/customerManagement.js";
  import Helper from "@/common/helper.js";
  export default {
    components: {

    },
    props: ['servicePersonnelId'],
    data() {
      return {
        subscriptionId: '',
        signedId: '',
        loading: false,
        subscriptionUserId: '',
        subscribeModalState: false,
        formTransactionInformation: {
          subscriptionDate: '',
          subscriptionHousePrice: '',
          subscriptionHouseTotal: '',
        },
        transactionInformationValidate: {
          subscriptionDate: [
            { required: true, type: 'date', message: '请选择认购日期', trigger: 'change' }
          ],
          subscriptionHousePrice: [
            { required: true, message: '请输入单价', trigger: 'blur' },
            { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
          ],
          subscriptionHouseTotal: [
            { required: true, message: '请输入总价', trigger: 'blur' },
            { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
          ],
        },
        repurchaseState: false,
        WithdrawState: false,
        columns1: [
          {
            title: '成交房号',
            slot: 'buildingNameBasis',
            minWidth: 180
          },
          {
            title: '成交详情',
            slot: 'transactionDetails',
            minWidth: 300,
          },
          {
            title: '购房人',
            slot: 'homeBuyer',
            minWidth: 300,
          },
          {
            title: '成交状态',
            slot: 'transactionStatus',
            minWidth: 120
          },
          {
            title: '操作',
            key: 'address',
            fixed: 'right',
            width: 160,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('a', {
                  style: {
                    marginRight: "10px",
                    display: params.row.type == '1' ? 'inline-block' : 'none'
                  },
                  on: {
                    click: (e) => {
                      e.stopPropagation();
                      this.signUpFun(params.row);
                    }
                  }
                }, '签约'),
                h('a', {
                  style: {
                    marginRight: "10px",
                    display: params.row.type == '1' ? 'inline-block' : 'none'
                  },
                  on: {
                    click: (e) => {
                      e.stopPropagation();
                      this.repurchaseClick(params.row);
                    }
                  }
                }, '退购'),
                h('a', {
                  style: {
                    display: params.row.type == '3' ? 'inline-block' : 'none'
                  },
                  on: {
                    click: (e) => {
                      e.stopPropagation();
                      this.withdrawClick(params.row);
                    }
                  }
                }, '退签')
              ]);
            }
          }
        ],
        data1: []
      }
    },
    methods: {
      // 签约
      signUpFun(rows) {
        this.subscriptionId = rows.buyers[0].subscriptionId
        this.subscribeModalState = true
      },
      subscribeModalCancel() {
        this.subscribeModalState = false
      },
      subscribeModalOk() {
        this.$refs.formTransactionInformation.validate((valid) => {
          if (valid) {
            let params = {
              subscriptionId: this.subscriptionId,
              signDate: (this.formTransactionInformation.subscriptionDate && Helper.timestampToTime(this.formTransactionInformation.subscriptionDate)) || '',
              signedPrice: (this.formTransactionInformation.subscriptionHouseTotal-0)*10000,
              unitPrice: (this.formTransactionInformation.subscriptionHousePrice-0)*10000,
              orderSource: 5,
              userCustomerId: this.$route.query.userCustomerId
            }
            orderSignedCreate(params).then(res=>{
              this.$Message.success('签约成功!');
              this.subscribeModalState = false
              this.initData()
              this.$store.commit("basicinformation", Math.random())
            }).catch(err=>{
              this.$Message.error(err)
            })
          }
        })
      },
      // 退购
      repurchaseClick(rows) {
        console.log("rows----------",rows);
        this.subscriptionUserId = rows.subscriptionId
        this.repurchaseState = true
      },
      repurchaseStateCancel(){
        this.repurchaseState = false
      },
      repurchaseStateOk() {
        let params = {
          subscriptionId: this.subscriptionUserId,
          subscriptionType: 3,
          buildingId: this.servicePersonnelId.buildingId,
          customerId: this.$route.query.customerId,
          userCustomerId: this.$route.query.userCustomerId
        }
        subscriptionUpdate(params).then(res=>{
          this.$store.commit("basicinformation", Math.random())
          this.repurchaseState = false
          this.initData()
          this.$Message.success('取消认购成功!')
        }).catch(err=>{
          this.$Message.error(err)
        })
      },
      // 退签
      withdrawClick(rows) {
        this.signedId = rows.signedId
        this.WithdrawState = true
      },
      WithdrawStateCancel() {
        this.WithdrawState = false
      },
      WithdrawStateOk() {
        let params = {
          signedId: this.signedId,
          signedType: 2,
          orderSource: 5,
          userCustomerId: this.$route.query.userCustomerId
        }
        businessUpdate(params).then(res=>{
          this.$store.commit("basicinformation", Math.random())
          this.WithdrawState = false
          this.initData()
          this.$Message.success('取消签约成功!')
        }).catch(err=>{
          this.$Message.error(err)
        })
      },
      // 初始化获取数据
      initData() {
        this.loading = true
        let params = {
          customerId: this.$route.query.customerId,
          userId: this.servicePersonnelId.servicePersonnelVal,
        }
        businesslist(params).then(res=>{
          this.loading = false
          if (res) {
            this.data1 = res
          } else {
            this.data1 = []
          }
        }).catch(err=>{
          this.loading = false
          this.$Message.error(err)
        })
      }
    },
    computed: {

    },
    created() {

    },
    watch: {
      servicePersonnelId:{
        handler(newV,oldV){
          // 初始化获取数据
          this.initData()
        },
        deep: true, //深度遍历
        immediate: true //默认false，设置为true会立即执行
      }
    },
  }
</script>
<style lang="scss" scoped>
.recordedExistenceModel{
  p{
    font-size: 18px;
    text-align: center;
    margin: 10px 0 30px;
  }
  .footer{
    text-align: center;
    button{
      width: 120px;
      margin: 0 10px;
    }
  }
}
.footer{
  padding-top: 20px;
  text-align: center;
  button{
    width: 120px;
    margin: 0 10px;
  }
}
</style>
